<template>
  <div>
    <!-- <h1>登录页面</h1> -->
    <div class="denglu">
      <div class="dengluA">
        <p>DM账号登录</p>

        <!-- 扫码登录 -->
        <div class="dengluLeft">
          <img src="@/assets/QQ图片20221012113052.png" alt="">
          <p>可以扫码登录</p>
        </div>

        <!-- 登录框 -->
        <div v-if="isShow==0" ref="form" class="dengluRight"  v-loading="loading"
            element-loading-text="拼命加载中">
          <el-input class="aa" placeholder="请输入手机号" v-model="userInfo.phone"></el-input>
          <el-input class="aa" placeholder="请输入密码" v-model="userInfo.password" show-password></el-input>
          <button class="duanxin" @click="isShow=1">没有账号？去注册</button><br>
          <button class="DL" @click="alogin(userInfo)" >登录</button>
          <ul>
            <li>注册</li>
            <li>忘记密码</li>
            <li>遇到问题</li>
          </ul>
          <ol>
            <li class="el-icon-platform-eleme QQ"></li>
            <li class="el-icon-star-on ZFB"></li>
            <li class="el-icon-user-solid WX"></li>
          </ol>
        </div>

        <!-- 注册框 -->
        <div v-else class="dengluRight zhuceye"  v-loading="loading"
            element-loading-text="拼命加载中">
            <el-input class="aa" placeholder="请输入用户名" v-model="zhuce.name"></el-input>
          <el-input class="aa" placeholder="请输入手机号" v-model="zhuce.phone"></el-input>
          <el-input class="aa" placeholder="请输入密码" v-model="zhuce.password" show-password></el-input>
          <button class="duanxin" @click="isShow=0">没有账号？去登录</button><br>
          <button class="DL" @click="goZhuce(zhuce)" >注册</button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
//引入请求登录,注册的接口
import {userLogin,Register} from "@/assets/request.js";
//引入用户信息相关的vuex的js
import {mapActions}from "vuex";
export default{
 
    //组件名字
    name:'Login',

    //组件数据
    data() {
      return {

        //element组件加载中需要设置的，为false就不使用，true就使用
        loading:false,

        //账号密码用一个对象来装,v-model双向绑定
        userInfo:{
          phone:13317690512,
          password: "456789",
        },

        //注册账号的数据
        zhuce:{
          name:"蛋糕",
          phone:13317690511,
          password: "123456",


        },

        isShow:0
        
      };
    },

    //方法
    methods:{

      ...mapActions("user",['login']),

      //点击登录后
      async alogin(userInfo){

        try{
          //我要发登录请求
          this.loading=true
          let res =await userLogin(userInfo)
          console.log(res);
          //设置用户名、设置登录态（都走vuex），设置token
          //把用户名给vuex
          this.login(res.data.result.name) //这里走了actions，就会commit，修改state里面的数据

          //本地存储保存登录后返回的信息 token和用户id
          sessionStorage.setItem("token",res.data.result.token)
          sessionStorage.setItem("id",res.data.result.id)
          sessionStorage.setItem("touxiang",res.data.result.header_img)
          // sessionStorage.setItem("name",res.data.result.name)

          //通知
          this.$message({
            message:"恭喜你,成功登录",
            type:"success",
            duration:800,
          });
          this.loading=false;

          this.$router.push({
                name: 'Index',
          });

        }catch(error){
          console.log(error);
          this.loading=false;
          this.$message({
            message:"登录失败，请检查号码和密码是否正确",
            type:"warning",
            duration:1000,
          })

        }

      },

      //点击注册按钮后
    async goZhuce(zhuce){

        try{
          //发送请求，先弹窗加载中
          this.loading=true
          //调用注册账号的函数，把输入的数据传输过去
          let ress = await Register(zhuce)
          console.log(ress); //打印查看状态码是否为200

           //成功后，弹出提醒框
           this.$message({
            message:"恭喜你,成功注册",
            type:"success",
            duration:800,
          });

          //加载中弹窗关闭
          this.loading=false;

        }catch(error){

          //注册失败的话，加载中弹窗关闭
          this.loading=false;

          //弹出提醒框
          this.$message({
            message:"注册失败，手机号或用户名已被注册",
            type:"warning",
            duration:1000,
          })

        }
  

      }


      //点击登录后
      // async login(userInfo){
      //   //把element组件赋值为true，显示加载中
      //   this.loading = true;

      //   // console.log('去登陆',userInfo);  此时后台能看到userInfo可以正常携带账号密码数据

      //   //把拿到的账号密码对象传入请求登录的接口函数里，并赋值给变量res
      //   let res = await userLogin(userInfo)
      //   console.log(res);   //res.status 状态为 200，就是服务器接收到userInfo了

      //   if(res.status == 200){
      //     //接收成功后，element加载中组件消失
      //     this.loading = false;
      //     //element组件弹框提醒
      //     this.$message({
      //       //文字信息
      //       message:"恭喜你,成功登录",
      //       //弹框类型--样式会不一样
      //       type:"success",
      //       //出现时间写800毫秒，不足1秒
      //       duration:800,
      //     });

      //   }else{
      //     //如果状态码不为200,不显示加载中组件
      //     this.loading = false;
      //     //element组件弹框提醒
      //     this.$message({
      //       message:"登录失败，请检查号码和密码是否正确",
      //       type:"warning",
      //       duration:800,
      //     });
      //   }

      //   //使用会话存储空间
      //   //把res里的token乱码存到--会话存储空间里，这个用于临时保存同一个窗口的数据，在关闭之后就会删除，在控制台Application》Session Storage里可以看到
      //   //这个token以后在购物车页面 订单页面 需要传输使用，类似身份证，显示对应的用户的购物车信息，订单信息
      //   sessionStorage.setItem("token",res.data.result.token)
      // }

    }


}

</script>

<style lang='scss' scoped>


.denglu{
  width: 100%;
  height: 700px;
  background-color: gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;

 

  .dengluA{
    width: 800px;
    height: 445px;
    // border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    p{
    width: 100%;
    height: 60px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 60px;
    font-size: 35px;
  }

  .dengluLeft{
    width: 300px;
    height: 300px;
    // border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    img{
      width: 250px;
      height: 250px;
    }

    p{
      width: 250px;
      font-size: 12px;
      color: grey;
    }
  }

  .dengluRight{
    width: 330px;
    height: 100%;
    // border: 1px solid black;

    .aa{
      width: 300px;
      margin: 10px;
    }

    button,li{
      cursor: pointer;
    }


    .duanxin{
      background-color: transparent;
      color: blue;
      border: none;
      margin: 10px;
    }
   .DL{
    width: 300px;
      height: 40px;
      background-color: green;
      font-size: 16px;
      color: white;
      border: none;
      border-radius: 10px;
      margin: 10px;

      &:hover{
        background-color: orange;
        transition: all 0.5s;
      }

   }

   ul{
    height: 15px;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 20px;

    li{
      color: blue;
      padding: 0px 10px;
      border-right: 1px solid grey;

      &:last-child{
        border: none;
      }
   
    }

   }

   ol{
    margin: 0;
    margin-top: 10px;
    padding: 0;
    display: flex;
    justify-content: center;
    text-align: center;

    li{
      font-size: 20px;
      padding: 10px 10px;

      &:nth-of-type(1):hover{
        color: pink;
      }

      &:nth-of-type(2):hover{
        color: rgb(17, 160, 255);
      }

      &:nth-of-type(3):hover{
        color: rgb(22, 197, 107);
      }
    }

 
   
   }
  }
  }
}
</style>
